<template>
    <div class="guanggao">
        <div class="guanggaoTop">
            <div class="ggTOPleft">
                <img src="../img/硬核补贴.png" alt="">
                <div class="ggdjs">
                    <span class="djszt time">{{ time3 }}</span>
                    <span class="dian">:</span>
                    <span class="djszt time1">{{ time1 }}</span>
                    <span class="dian">:</span>
                    <span class="djszt time2">{{ time2 }}</span>
                </div>
            </div>
            <div class="ggTopright">
                <span>大牌底价补贴></span>
            </div>
        </div>
        <div class="guanggaoBootom" >
            <div class="ggBootomSmall" v-for="(item,index) in arrCon.slice(0,4)">
                <RouterLink :to="{
                    name: 'xiangQing',
                    query: {
                        id: item.body.items[0].id
                    }
                }">
                <img :src="item.body.items[0].url" alt=""></RouterLink>
                <div class="ggzt">
                    <span class="yhj">硬核价</span><span class="ggqian">￥</span><span class="qian">{{
                        item.body.items[0].product_price
                        }}</span>
                </div>
                <div class="yj">
                    <span>￥200</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import axios from 'axios';
const time3 = ref('0')
const time1 = ref('0')
const time2 = ref('0')
const timer = setInterval(() => {
    let date = new Date('2027-12-29 0:0:0')
    const nowTime = new Date().getTime()
    let time = date.getTime() - nowTime
    time2.value = Math.floor((time % (1000 * 60)) / 1000) + ''
    time1.value = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60)) + ''
    time3.value = Math.floor((time / (1000 * 60 * 60)) / (1000 / 24)) + ''
    if (time2.value < 10) {
        time2.value = '0' + time2.value
    }
    if (time1.value < 10) {
        time1.value = '0' + time1.value
    }
}, 1000)
let arrCon = ref([])
console.log(arrCon.value);


let imgSrc = 'https://apis.netstart.cn/xmsc/home/channel1_tab?page_id=14709&type=classification&block_id=3570989&id=69&page_size=40&page_index=3';
    axios.get(imgSrc).then((res) => {
        arrCon.value = res.data.data.sections;
        // console.log(res);
        

 })


</script>
<style scoped>
.guanggao {
    width: 3.52rem;
    height: 1.65rem;
    background-color: #ffffff;
    margin: 0.12rem auto;
    margin-top: 0.5rem;
    border-radius: 0.1rem;
    font-size: 0.12rem;
}


.djszt {
    display: inline-block;
    width: 0.21rem;
    text-align: center;
    background-color: #f7261d;
    color: #fff;
    box-sizing: content-box;
    border-radius: 0.02rem;
}

.dian {
    color: #f7261d;
}

.ggTOPleft img {
    width: 0.64rem;
    height: 0.16rem;
    margin-right: 0.06rem;
}

.guanggaoTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ggTOPleft {
    display: flex;
    margin: 0.12rem;
}

.ggTopright {
    color: #f7261d;
    margin-right: 0.11rem;
}

.guanggaoBootom {
    display: flex;
    justify-content: space-around;
}

.ggBootomSmall img {
    width: 0.79rem;
    height: 0.79rem;
}

.ggBootomSmall {
    text-align: center;
    color: #f8261d;

}

.yhj {
    font-size: 0.1rem;
}
.yj{
    text-decoration: line-through;
    color: #999999;
}
.ggqian {
    font-size: 0.09rem;
    font-weight: bold;
}

.ggBootomSmall .qian {
    font-size: 0.15rem;
    font-weight: bolder;
}

</style>